<%--
  Created by IntelliJ IDEA.
  User: zhangteng
  Date: 2018/1/2
  Time: 14:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>

    <style type="text/css">
        h2.pos_left {
            position: relative;
            left: -20px
        }

        h2.pos_right {
            position: relative;
            left: 20px
        }

        img {
            vertical-align: middle;
        }

        div {
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            text-align: center;
            clear: both;
        }

        #div1 {
            position: absolute;
            right: 0;
            bottom: 0;
        }

        ul {
            float: left;
            list-style-type: none;
        }

        li {
            display: inline;
        }

        a:hover {
            background-color: springgreen;
        }

        a {
            float: left;
            width: 7em;
            text-decoration: none;
            color: white;
            background-color: purple;
            padding: 0.2em 0.6em;
            border-right: 1px solid white;
        }

        #showImg {
            display: inline;
        }

        #toCamera {
            display: block;
        }
    </style>

    <script>
        $(function () {
            $("ul li:first").click(function () {
                $("p").hide(1500);
            });
            $(".li3").click(function () {
                $("p").show(1500, function () {
                    $("p").hide(1500);
                });
            });
            $(".li2").click(function () {
                $("h2").slideToggle();
            });
            $("#div1").click(function () {
                /*ajax的load方法*/
                /*$(this).load("cd.xml", function (responseTxt, statusTxt, xht) {
                 if (statusTxt == "success") {
                 $("#div1").html("<ol></ol>");
                 $(responseTxt).find("artist").each(function () {
                 var txt = $(this).text();
                 $("<li></li>").html(txt).appendTo("ol");
                 });
                 alert("数据：" + $(responseTxt).find("cd").size() + "\n状态" + statusTxt);
                 }
                });
                 */
                /*ajax的get方法*/
                /*$.get("cd.xml", function s(data, status) {
                 alert("数据：" + $(data).find("cd").size() + "\n状态" + status);
                 });*/

                /*ajax的post方法*/
                /*$.post("http://117.34.91.90:8899/imp/android/loginWarningPT.do",
                 {
                 "username":"yujingapp",
                 "password":"1"
                 },function (data,status) {
                 alert(data+"....."+status);
                 });*/

                $.ajax({
                    url: "index.jsp", success: function (data) {
                        $(data).find("div:first").each(function () {
                            alert($(this).text());
                        });

                    }
                });

            });
            $("#toCamera").click(function () {
                showImg();
            });
        });
        /*function showImg(url) {
         $("#showImg").append("<img src='img/a1.jpg'>");
         }*/
        function showImg(url, name) {
            $("#showImg").append('<img class="img" src="img/a1.jpg"/>');
            return name;
        }
    </script>

</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的<img src="img/a1.jpg">原始左侧位置增加 20 像素。</p>

<div id="div1">2</div>
<ul>
    <li><a>123</a></li>
    <li class="li2"><a>456</a></li>

    <li class="li3"><a>789</a></li>
</ul>
<button id="toCamera">调用相机相册</button>
<div id="showImg"></div>
<img id="img"/>
</body>
</html>
